<template>
  <div class="portal-header">
    <div>
      <div>
        <div style="display: flex" class="logo-img">
          <img src="../../assets/img/other/keTangLogo.png" alt="hao" @click="jumpToHome">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="首页" name="first"></el-tab-pane>
            <el-tab-pane label="产品功能" name="second"></el-tab-pane>
            <el-tab-pane label="机构版" name="third"></el-tab-pane>
            <el-tab-pane label="渠道合作" name="fourth"></el-tab-pane>
            <el-tab-pane label="会员权益" name="fifth"></el-tab-pane>
            <el-tab-pane label="帮助中心" name="sixth"></el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="two-button" v-show="isLogin === false">
        <el-button class="el-button--default" @click="login">登录</el-button>
        <el-button type="primary" @click="register">注册</el-button>
      </div>
      <div class="one-button" v-show="isLogin === true">
        <el-button type="primary" @click="jumpToMain()">进入课堂</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PortalHeader',
  components: {},
  data() {
    return {
      activeName: 'first',
      url: '',
      isLogin: null
    }
  },
  methods: {
    login() {
      this.$router.push('/login')
    },
    register() {
      this.$router.push('/register')
    },
    jumpToHome() {
      this.jump('homepage')
      this.activeName = 'first'
    },
    jumpToMain() {
      this.$router.push('/main')
    },
    handleClick(tab) {
      switch (tab.name) {
        case 'first':
          this.jump('homepage');
          break;
        case 'second':
          this.jump('product');
          break;
        case 'third':
          this.jump('mechanism');
          break;
        case 'fourth':
          this.jump('cooperation');
          break;
        case 'fifth':
          this.jump('membership');
          break;
        case 'sixth':
          this.jump('help');
          break;
      }
    },
    jump(url) {
      this.url = url
    }
  },
  mounted() {
    // this.$router.push(this.url)
    const token = localStorage.getItem("token");
    this.isLogin = token != null;
  },
  watch: {
    url(newValue) {
      this.$router.push(newValue)
    }
  }
}
</script>

<style scoped>
.portal-header {
  width: 100%;
  height: 90px;
  box-shadow: 0 1px 0 0 #dfdfdf;
  background: #fff;
}

.portal-header > div {
  height: 95px;
  width: 1485px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.two-button {
  white-space: nowrap;
  width: 230px;
  height: 50px;
}

::v-deep .el-button {
  border-color: #4285F4;
  width: 120px;
  height: 50px;
  line-height: 10px;
  text-align: center;
}

.el-button--default {
  margin-right: 20px;
  color: #4285F4;
}

::v-deep .el-button > span {
  font-size: 18px;
}

img {
  margin-top: 15px;
  height: 40px;
  width: 156px;
  margin-right: 48px;
}

.logo-img {
  margin-bottom: 19px;
  transform: translateX(-20px);
  width: 128px;
  margin-right: 72px;
  padding: 17px 0;
  cursor: pointer;
  border: none;
}

::v-deep .el-tabs__content {
  display: none;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: white;
}

::v-deep .el-tabs__item {
  color: black;
  font-size: 24px;
}

.el-tabs {
  margin-top: 20px;
}

::v-deep .el-tabs__active-bar {
  height: 5px;
  bottom: -24px;
}

::v-deep .el-tabs__nav-wrap {
  overflow: inherit;
}

::v-deep .el-tabs__nav-scroll {
  overflow: inherit;
}
</style>